<!-- 角色编辑弹窗 -->
<template>
	<a-modal :width="1060" :visible="visible" :confirm-loading="loading" :title="isUpdate ? '修改民宿' : '添加民宿'"
		:body-style="{ paddingBottom: '8px' }" @update:visible="updateVisible" @ok="save">
		<a-form :label-col="{ md: { span: 3 }, sm: { span: 24 } }"
			:wrapper-col="{ md: { span: 21 }, sm: { span: 24 } }">
			<!-- 隐藏字段 -->
			<a-form-item v-show="false">
				<a-input v-model:value="form.id" />
			</a-form-item>
			<a-form-item label="民宿名称" v-bind="validateInfos.name">
				<a-input allow-clear :maxlength="20" placeholder="请输入民宿名称" v-model:value="form.name" />
			</a-form-item>
			<a-form-item label="详细地址" v-bind="validateInfos.address">
				<a-input allow-clear :maxlength="20" placeholder="请输入具体地址信息" v-model:value="form.address" />
			</a-form-item>
			<a-form-item label="缩略图" v-bind="validateInfos.image">
				<a-input allow-clear :maxlength="20" placeholder="请上传缩略图" v-model:value="form.image" disabled style="width: 548px;" />
				<a-upload :show-upload-list="false" :customRequest="onUpload">
					<a-button type="primary" class="ele-btn-icon">
						<template #icon>
							<upload-outlined />
						</template>
						<span>上传缩略图</span>
					</a-button>
				</a-upload>
			</a-form-item>
			<a-form-item label="民宿简介" v-bind="validateInfos.description">
				<a-textarea :rows="4" :maxlength="5500" placeholder="请输入民宿简介" v-model:value="form.description" />
			</a-form-item>
			<!-- <a-form-item label="民宿内容" v-bind="validateInfos.content">
				<tinymce-editor v-model:value="form.content" :init="{ height: 425 }" />
			</a-form-item> -->
			<a-form-item label="房型" >
			    <a-radio-group v-model:value="form.roomType">
					<a-radio value="单人间">单人间</a-radio>
					<a-radio value="双人间">双人间</a-radio>
				</a-radio-group>
			</a-form-item>
			<a-form-item label="价格" v-bind="validateInfos.price">
				 <a-input-number  v-model:value="form.price" addonAfter="RMB" />
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		watch
	} from 'vue';
	import {
		Form,
		message
	} from 'ant-design-vue';
	import {
		assignObject
	} from 'ele-admin-pro';
	import {
		addAttraction,
		updateAttraction,
		uploadFile
	} from '@/api/neirong/attraction';
	import type {
		Attraction
	} from '@/api/neirong/attraction/model';
	import TinymceEditor from '@/components/TinymceEditor/index.vue';

	const useForm = Form.useForm;

	const emit = defineEmits < {
		(e: 'done'): void;
		(e: 'update:visible', visible: boolean): void;
	} > ();

	const props = defineProps < {
		// 弹窗是否打开
		visible: boolean;
		// 修改回显的数据
		data ? : Attraction;
	} > ();

	// 是否是修改
	const isUpdate = ref(false);

	// 提交状态
	const loading = ref(false);

	// 表单数据
	const form = reactive < Attraction > ({
		id: undefined,
		name: '',
		address: '',
		image: '',
		description: '',
		content: '',
		roomType: '单人间',
		price: 0,
		roomReserved: false
	});

	// 表单验证规则
	const rules = reactive({
		name: [{
			required: true,
			message: '请输入民宿名称',
			type: 'string',
			trigger: 'blur'
		}],
		address: [{
			required: true,
			message: '请输入民宿地址',
			type: 'string',
			trigger: 'blur'
		}],
		image: [{
			required: true,
			message: '请上传缩略图',
			type: 'string',
			trigger: 'blur'
		}],
		description: [{
			required: true,
			message: '请输入民宿简介',
			type: 'string',
			trigger: 'blur'
		}],
		price: [{
			required: true,
			message: '请输入民宿价格',
			type: 'number',
			trigger: 'blur'
		}]
	});

	const {
		resetFields,
		validate,
		validateInfos
	} = useForm(form, rules);

	/* 保存编辑 */
	const save = () => {
		console.log('save')
		console.log(form)
		validate()
			.then(() => {
				loading.value = true;
				const saveOrUpdate = isUpdate.value ? updateAttraction : addAttraction;
				saveOrUpdate(form)
					.then((msg) => {
						loading.value = false;
						message.success(msg);
						updateVisible(false);
						emit('done');
					})
					.catch((e) => {
						loading.value = false;
						message.error(e.message);
					});
			})
			.catch(() => {});
	};

	/* 上传 */
	const onUpload = ({
		file
	}) => {
		if (file.size / 1024 / 1024 > 100) {
			message.error('大小不能超过 100MB');
			return false;
		}
		uploadFile(file)
			.then((res) => {
				message.success('上传成功');
				form.image = res;
			})
			.catch((e) => {
				message.error(e.message);
			});
		return false;
	};

	/* 更新visible */
	const updateVisible = (value: boolean) => {
		emit('update:visible', value);
	};

	watch(
		() => props.visible,
		(visible) => {
			if (visible) {
				if (props.data) {
					assignObject(form, props.data);
					isUpdate.value = true;
				} else {
					isUpdate.value = false;
				}
			} else {
				resetFields();
			}
		}
	);
</script>
